<template>
  <div id="login-app">
    <div class="login-form">
      <div class="login-user">
        <div style="color: #a8abb2; font-size: 16px; margin-bottom: 5px">
          用户名:
        </div>
        <el-input
          placeholder="username"
          :prefix-icon="Calendar"
          v-model="username"
        ></el-input>
      </div>
      <div class="login-pwd">
        <div style="color: #a8abb2; font-size: 16px; margin-bottom: 5px">
          密码:
        </div>
        <el-input
          type="password"
          placeholder="password"
          :prefix-icon="Search"
          v-model="password"
        ></el-input>
      </div>
      <div class="login-div">
        <el-button type="primary" class="login-btn" @click="login"
          >登录</el-button
        >
      </div>
      <div class="login-register">
        <el-button @click="register" round>注册</el-button>
        <el-button @click="reset" round>修改密码</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { $go2, dynamicRouter } from "../utils/routerUtil";
import { Login, Register } from "../api/api";
import { Calendar, Search } from "@element-plus/icons-vue";
import { getMenus } from "../utils/menuUtils";
import store from "../store/store";
import { ref, reactive, onMounted } from "vue";
import { useStore } from "../store/pinia";
const username = ref("admin");
const password = ref("123456");
let menus = reactive([]);
const pinia = useStore();
/**
 * 测试请求是否成功
 */
onMounted(()=>{
 console.log(pinia);
});

/**
 * 
 */
function login() {
  const params = {
    username: "admin",
    password: "123456",
  };
  Login(params)
    .then((res: any) => {
      if (res.code == 0) {
        window.localStorage.setItem("token", res.result.token);
        menus = res.result.menus;
        // 处理菜单
        const menuArray = getMenus(menus);
        window.localStorage.setItem("menus",JSON.stringify(menuArray));
        // store 添加菜单
        store.commit("ADD_MENU", menuArray);
        console.log(store.state.menuArray);
        const user = {
          UserId: res.result.UserId,
          RoleId: res.result.RoleId,
          UserName: res.result.UserName,
          Password: res.result.Password,
        };
        store.commit("ADD_USER_INFO", user);
        // 添加动态路由
        dynamicRouter(menus);
        $go2("/layout");
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
}

function register() {
  alert(1);
  const params = {
    uid: 1,
    roleid: 1,
  };
  Register(params)
    .then((res: any) => {
      console.log(res);
    })
    .catch((err: any) => {
      console.log(err);
    });
}

function reset() {}
</script>

<style lang="less" scoped>
#login-app {
  width: 100%;
  height: 100%;
  background: url(../asset/images/面一面.png);
  background-size: 100% 100%;
  position: relative;

  .login-form {
    position: absolute;
    top: 30%;
    right: 10%;
    width: 300px;
    height: 210px;
    padding: 10px;
    background-color: aliceblue;
    border-radius: 10px;

    .login-user {
      margin-bottom: 10px;
    }

    .login-pwd {
      margin-bottom: 10px;
    }

    .login-div {
      width: 100%;
    }

    .login-btn {
      width: 100%;
    }

    .login-register {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
  }
}
</style>
